import PropTypes from "prop-types"
import React, { memo } from "react"
import Rating from '@mui/material/Rating'
import { ItemWrapper } from "./style"
import Swiper from "@/components/swiper"
const RoomItem = memo((props) => {
  const { itemData, itemWidth } = props

  return (
    <ItemWrapper 
      verifyColor={itemData.verify_info?.text_color || "#35976a"}
      starColor={itemData?.star_rating_color || "#008489"}  
      itemWidth={itemWidth}
    >
      {
        itemData?.picture_urls ? 
          <Swiper>
            {
              itemData.picture_urls.map((item, index) => {
                return (
                  <div className="img" key={index}>
                    <img src={item} alt="" />
                  </div>
                )
              })
            }
          </Swiper> :
          <div className="img">
            <img src={itemData.picture_url} alt="" />
          </div> 
      }
      <div className="tags">
        <span className="tags-item">
          {
            itemData.verify_info.messages.join(' · ')
          }
        </span>
      </div>
      <div className="name">{itemData.name}</div>
      <div className="price">{itemData.price_format}/晚</div>
      <div className="bottom">
        <Rating 
          name="no-value" 
          value={itemData.star_rating ?? 5} 
          readOnly 
          precision={0.5}
          sx={{
            fontSize: "18px", 
            color: itemData?.star_rating_color || "#008489",
            marginRight: "-1px"
          }} 
        />
        <div className="info">
          <span>{itemData?.reviews_count}</span>
          {
            itemData?.bottom_info?.content&&<span className="dot">·</span>
          }
          <span>{itemData?.bottom_info?.content}</span>
        </div>
      </div>
    </ItemWrapper>
  )
});

RoomItem.propTypes = {
  itemData: PropTypes.object
};

export default RoomItem
